<template>
  <div id="index">
    <div class="container" style="height: 100vh; border: 1px solid #eee">
      <div class="main-container">
        <main class="main">
          <router-view></router-view>
            <div class="section">
                <h1 style="text-align: center">教材管理系统</h1>
                <p>欢迎使用教材管理系统！本系统旨在为学校和学生提供便捷的教材管理和服务。以下是本系统的主要功能介绍：</p>
            </div>
            <div class="section">
                <h2>主要功能</h2>
                <ol>
                    <li><strong>领书查询</strong><br>方便学生和教师查询学生和教师的领书情况。</li>
                    <li><strong>购书表</strong><br>教务处审核后由供应商信息生成的最优购书单，教务处和系部门均可查看。</li>
                    <li><strong>教材修改</strong><br>系部门可以增、删、改本系的教材信息。</li>
                    <li><strong>教材信息</strong><br>系部门可和教务处可以查看教材信息的修改与库存变化，库存变化由领书，报损。购书等内容生成。</li>
                </ol>
            </div>
            <div class="section">
                <p>希望本系统能为您的学习和工作提供帮助。如有任何疑问或建议，请联系学校教材管理部门。</p>
            </div>
        </main>
      </div>
    </div>
  </div>
</template>
<script>
import myMenu from "@/components/myMenu.vue";
export default {
  name: 'index',
  components: {
    myMenu,
  }
};
</script>

<style scoped>
/* Index2 Page Styles */
a {
  text-decoration: none;
}

/* Main Container Styles */
.container {
  display: flex;
  height: 100vh;
  border: 1px solid #eee;
}

/* Sidebar Styles */

/* Main Content Styles */
.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Main Area Styles */
.main {
    margin-top:20px;
    justify-content: center;
    width: 80%;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

</style>